<template>
  <view class="user-info-page">
    <view class="info-item">
		<text class="label">用户名</text>
	  <input class="input" placeholder="用户名" :value="user.userName"></input>
    </view>
    <view class="info-item">
      <text class="label">年龄</text>
	  <input class="input" placeholder="年龄" :value="user.age"></input>
    </view>
    <view class="info-item">
      <text class="label">性别</text>
      <radio-group class="radio-group">
        <label class="radio-label">
          <radio value="男" :checked="user.sex==1"></radio>
          <text>男</text>
        </label>
        <label class="radio-label">
          <radio value="女" :checked="user.sex==2"></radio>
          <text>女</text>
        </label>
      </radio-group>
    </view>
    <view class="info-item">
      <text class="label">出生日期</text>
	  <input class="input" placeholder="出生日期" :value="user.birthDay"></input>
    </view>
    <view class="info-item">
      <text class="label">手机</text>
      <input class="input" placeholder="请输入手机" :value="user.phone"></input>
    </view>
    <view class="info-item">
      <text class="label">年级</text>
      <text class="value">初二</text>
    </view>
    <button class="save-btn" @click="saveInfo">保存</button>
  </view>
</template>

<script>
	import http from '../../http';
export default {
  data() {
    return {
	  user:{}
    };
  },
  methods: {
	  getuserList() {
	  	http({
	  		url: "/api/student/user/current",
	  		method: "post",
	  	}).then(res => {
	  		console.log(res);
	  		if (res.code === 1) {
	  			this.user = res.response
	  		}
	  	})
	  },
  
    saveInfo() {
		http({
			url:"/api/student/user/update",
			method:"post"
		})
      // 保存信息逻辑，如调用接口上传数据
      console.log('保存的信息：');
    }
  },
  onLoad() {
  	this.getuserList()
  }
};
</script>

<style scoped>
.user-info-page {
  padding: 15rpx;
}
.info-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}
.label {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.value {
  font-size: 26rpx;
  color: #666;
}
.radio-group {
  display: flex;
}
.radio-label {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  font-size: 26rpx;
}
.input {
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 10rpx;
  font-size: 26rpx;
}
.save-btn {
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
}
</style>